@import 'src/assets/styles/variables';

.messageItem {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 5px;
  border-bottom: 2px solid rgba(150, 150, 150, 0.1);

  .senderInfo {
    display: flex;
    flex-direction: column;
    align-items: center;

    a {
      width: 50px;

      .senderPhoto {
        border-radius: 50%;
        height: 50px;
        width: 50px;
      }
    }

    .senderName {
      font-size: 0.7em;
      justify-self: flex-end;
    }
  }

  .messageBlock {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;

    .angle {
      height: 10px;
      width: 10px;
      background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 10px, $primaryMessageBgColor 0);
    }

    .message {
      padding: 10px;
      background-color: $primaryMessageBgColor;
      align-self: flex-start;
      border-radius: 5px 5px 5px 0;
      max-width: 205px;
      overflow: hidden;
    }
  }
}